<template>
    <div>
        <div class="containerCanvas">
            <div class="share-img" id="sgareImg">
                <img :src="posterUrlAfter" alt ref="splicingImg" crossorigin="Anonymous" />
            </div>
            <div class="creat-img" ref="box">
                <img :src="posterData.posterUrl" crossorigin="Anonymous" alt />
                <div
                    id="qrcode"
                    :class="[posterData.position==1?'qrcode qrcodeLB':posterData.position==2?'qrcode qrcodeRB':posterData.position==3?'qrcode qrcodeCBBig':posterData.position==4?'qrcode qrcodeCBSmall':'']"
                >
                    <img :src="url+'/'+posterData.path" alt crossorigin="Anonymous" />
                </div>
            </div>
             <kt-button
            class="poster-btn"
            label="下载海报"
            perms="true"
            type="primary"
            size="medium"
            @click="downloadImg(posterPopData)"
        />
        </div>
       
    </div>
</template>

<script>
import { qrcanvas } from "qrcanvas";
import html2canvas from "html2canvas";
import { baseUrl } from "@/utils/global"
import KtButton from "@/views/Core/KtButton";
export default {
    name: "PosterDetail",
    components: {
        KtButton
    },
    data() {
        return {
            paramsId: this.$route.query.id,
            posterData: {},
            posterUrlAfter: "",
            url: baseUrl,
            posterPopData:{
                activityName:this.$route.query.activityName
            }
        };
    },
    created() {},
    watch: {
        posterUrlAfter(val, oldval) {
            this.$refs.box.style.display = "none";
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            let that = this;
            that.$api.agent
                .posterAndQCodeUrl({ id: this.paramsId })
                .then(res => {
                    that.posterData = res.data;
                    that.$nextTick(function() {
                        html2canvas(that.$refs.box, {
                            scrollY: 0,
                            x: 460,
                            y: 180,
                            allowTaint: true,
                            useCORS: true
                        }).then(function(canvas) {
                            that.posterUrlAfter = URL.createObjectURL(
                                that.base64ToBlob(canvas.toDataURL())
                            );
                            that.imageSize(canvas.toDataURL());
                            that.hbSize = parseInt(
                                that.imageSize(canvas.toDataURL())
                            );
                            that.getImgSize(that.imageSize(canvas.toDataURL()));
                        });
                    });
                });
        },
        // 下载海报
        downloadImg(params) {
            var url = this.$refs.splicingImg.src;
            var xmlhttp;
            xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", url, true);
            xmlhttp.responseType = "blob"; // 请求返回的数据类型
            xmlhttp.onload = function() {
                if (this.status == 200) {
                    var blob = this.response;
                    var img = document.createElement("img"); // 预览图片
                    img.onload = function(e) {
                        window.URL.revokeObjectURL(img.src);
                    };
                    img.src = window.URL.createObjectURL(blob);
                    img.style.display = "none";
                    document.body.appendChild(img);
                    var a = document.createElement("a"); // 下载图片
                    a.href = window.URL.createObjectURL(blob); //图片地址
                    a.download = params.activityName; // 图片名字
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }
            };
            xmlhttp.send();
        },
        base64ToBlob(code) {
            let parts = code.split(";base64,");
            let contentType = parts[0].split(":")[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;

            let uInt8Array = new Uint8Array(rawLength);

            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], { type: contentType });
        },
        imageSize(base64Str) {
            const indexBase64 = base64Str.indexOf("base64,");
            if (indexBase64 < 0) return -1;
            const str = base64Str.substr(indexBase64 + 6);
            return parseInt(str.length * 0.75).toFixed(2);
        },
        getImgSize() {
            this.$emit("getImgSize", { hbSize: this.hbSize });
        }
    }
};
</script>

<style scoped lang='scss'>
.creat-img {
    width: 630px;
    height: 1125px;
    position: relative;
    // top: 125px;
    // left: 340px;
    img {
        width: 100%;
        height: 100%;
        z-index: 3;
    }
    .qrcode {
        position: absolute;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        // border-radius: 10px;
        background: white;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .qrcodeRB,
    .qrcodeLB {
        width: 210px;
        height: 210px;
        bottom: 20px;
    }
    .qrcodeRB {
        right: 20px;
    }
    .qrcodeLB {
        left: 20px;
    }

    .qrcodeCBBig {
        width: 460px;
        height: 460px;
        bottom: 350px;
        left: 50%;
        margin-left: -230px;
    }
    .qrcodeCBSmall {
        width: 210px;
        height: 210px;
        bottom: 200px;
        left: 50%;
        margin-left: -115px;
    }
}
.containerCanvas {
    width: 630px;
    // height: 1125px;
    position: relative;
    margin-left: 200px;
}
.share-img {
    width: 100%;
    height: 100%;
    img {
        width: 100%;
        height: 100%;
    }
}
.poster-btn {
    position: absolute;
        position: absolute;
    top: 0px;
    right: -120px;
}
</style>